import React, { Component } from "react";

// 高阶组件
// 高阶组件时一个函数，需要传入一个组件，并且返回一个新组件

// 来统一加上某些元素
// 统一加上某些自定义属性

// {...this.props}将接受到的所有的自定义属性，全部传递给子组件

// 高阶组件的作用就是增强组件的功能,并且进行复用
const hoc = (Comp) => {
  return class extends Component {
    render() {
      // console.log(this.props);
      return (
        <>
          <Comp a="3" {...this.props}></Comp>
          {/* <div>&copy;版权所有 千锋教育 2019 </div> */}
        </>
      );
    }
  };
};

// 装饰器写在类组件的上一行，加一个@
// 函数组件不能加装饰器
// @hoc
// class App extends Component {
//   render() {
//     console.log(this.props);
//     return (
//       <>
//         <h2>高阶组件</h2>
//       </>
//     );
//   }
// }

const App = hoc((props) => {
  console.log(props);
  return (
    <>
      <h2>高阶组件</h2>
    </>
  );
});

// const App2 = hoc(App);

// export default App2;

export default App;
